<script lang="ts" setup>
import {Histogram,Delete,DeleteFilled,Close,Plus,Picture,MoreFilled} from '@element-plus/icons-vue'

import type {DrawPanelType} from '../../../type/EditType'
import {ref,onMounted,onBeforeUnmount} from 'vue'
import {useEarthStore} from '../../../stores/earthObj'

import {useDrawMain} from "@/utils/GV_DrawFn/DrawMain"
import {BroadCaster} from '@/utils/BroadCaster'
import { useDrawGraphical } from '@/utils/GV_DrawFn/DrawGraphical'
import {useDrawLayerMirror} from '@/utils/GV_DrawFn/DrawLayerMirror'
import { MaskPopup } from '@/utils/UtilFn'

let store = useEarthStore();

onMounted(()=>{
    initialDrawMain()
})

// 声明广播器
let BroadCasterObj = new BroadCaster();

// 监听需要跟踪的函数
const onChangeTrackGraphic = (obj:any)=>{
    if(!obj) return;
    let p = obj.position;
    Array.isArray(obj.position[0]) && (p = obj.position[0])
    drawMain?.MoveCameraEye(p)
}
// 往广播器中注册
BroadCasterObj.addFn("onChangeTrackGraphic",onChangeTrackGraphic)
// 监听是否要清除整个画布的函数
const onChangeTaskClearLayer = (item:any)=>{
    
    let g = drawMain?.getGroup();
    g?.removeAllEntitys()
}
// 往广播器中注册
BroadCasterObj.addFn("onChangeTaskClearLayer",onChangeTaskClearLayer)

// 实时监听是否要修改图形
const onChangeEditGraphic = (item:any)=>{
    if(!item||!item.type) return;
    useDraw?.useMain(item.type,item)
}
// 往广播器中注册
BroadCasterObj.addFn("onChangeEditGraphic",onChangeEditGraphic)

let drawMain:useDrawMain|null = null;
let useDraw:useDrawGraphical|null = null;
let DrawLayerMirror:useDrawLayerMirror|null = null;

let TimeoutId:NodeJS.Timeout|null = null;
// 初始化绘制主体函数
const initialDrawMain = ()=>{
    
    let viewer = store.getViewer();
    
    if(!viewer){
        TimeoutId = setTimeout(initialDrawMain,1000)
        return;
    }

    clearTimeout(TimeoutId);

    drawMain = new useDrawMain(store.getViewer())
    
    useDraw = new useDrawGraphical(drawMain.getGroup(),drawMain.getViewer());

    DrawLayerMirror = new useDrawLayerMirror(drawMain.getViewer());

    // 右击结束的回调函数
    drawMain.DrawRightMouseEvent = (event:any,entity:object,data:object)=>{
        BroadCasterObj.RemindFn("onChangeAddTaskPanel",data)
    }
}
// 监听绘制的方法
const onChangeDrawItem = (item:DrawPanelType,index:number)=>{
    if(!drawMain) return;
    if(!item.isShow){
        MaskPopup("绘制已被禁用")
        return;
    }

    index == 0 && MaskPopup("请移动地图上绘制")
    if(item.type.includes("mirror")){
        DrawLayerMirror?.useMain(item.type)
    }else{
        drawMain.useDraw(item.type)
    }
}

onBeforeUnmount(()=>{
    drawMain?.destroy();
})

// 绘制面板的数据
const drawPanelList = ref<DrawPanelType[]>(window['GVDrawData'])

// 是否删除
let isPanelItemClose = ref(false);
const onChangePanelItemClose = ()=>{
    isPanelItemClose.value = !isPanelItemClose.value
}
// 删除本项操作
const onChangeDeleteItem = (item:DrawPanelType)=>{
}

// 截图功能
const screenShot = ()=>{
    drawMain?.ScreenShotCurrent().then((res:any)=>{
        let link = document.createElement("a");
        
        let objurl = URL.createObjectURL(res?.blob);
        link.download = "scene.png";
        link.href = objurl;
        link.click();

        document.body.removeChild(link)
    })

}
let loading = ref(false)
// 展示更多
const ShowMore = async (type:string)=>{
    
    if(type=="compass"){}
    else if(type=="colorful"){}
    else if(type == "KMLData"){
        DrawLayerMirror?.useMain(type,drawMain?.getGroup())
        return false;
    }else if(type == 'loadKMLData'){
        loading.value = true;
        await DrawLayerMirror?.loadKmlData('http://localhost:5173/task.kml');
        loading.value = false
        return;
    }
    DrawLayerMirror?.useMain(type,'')
}

</script>
<template>
  <div class="operatePanel" v-loading="loading">
    <div class="operatePanelBox">
        <div class="operateTitle">
            <span>操作面板</span>
            <div class="operatebtn">
                <el-icon><Plus /></el-icon>
                <el-icon @click="onChangePanelItemClose" v-if="!isPanelItemClose"><Delete /></el-icon>
                <el-icon @click="onChangePanelItemClose" v-else><DeleteFilled /></el-icon>
                <el-icon @click="screenShot"><Picture /></el-icon>
                <el-dropdown @command="ShowMore" trigger="click">
                    <el-icon><MoreFilled /></el-icon>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="compass">2D鹰眼</el-dropdown-item>
                        <el-dropdown-item command="colorful">多彩地球</el-dropdown-item>
                        <el-dropdown-item command="FramesPerSecond">显示帧率</el-dropdown-item>
                        <el-dropdown-item command="HeatMap">模拟热力图</el-dropdown-item>
                        <el-dropdown-item command="KMLData">导出KML</el-dropdown-item>
                        <el-dropdown-item command="loadKMLData">加载KML</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="operateContent">
            <el-scrollbar height="calc(100% - 30px)">
                <ul>
                    <li v-for="(item,index) in drawPanelList" :key="index">
                        <p class="drawPanelList_label">{{ item.label }}</p>
                        <ul class="EntityObjList">
                            <li v-for="(it,i) in item.children" :key="i">
                                <el-icon v-if="isPanelItemClose" class="deleteItem" @click="onChangeDeleteItem(it)"><Close /></el-icon>
                                <div @click="onChangeDrawItem(it,index)" class="EntityObjDiv">
                                    <el-icon><Histogram /></el-icon>
                                    <span>{{ it.text }}</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </el-scrollbar>
            
        </div>
    </div>
  </div>
</template>
<style scoped>
.operatePanel{
    position: absolute;
    width: 300px;
    height: 40%;
    background-color: #488adb75;
    border-radius: 10px;
    top: 10%;
    z-index: 100;
    right: 1%;
}
.operatePanelBox{
    width: 100%;
    height: 100%;
}
.operateTitle{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: relative;
}
.operateTitle::before{
    content: '';
    width: 5px;
    height: 63%;
    position: absolute;
    left: 5%;
    top: 23%;
    background-color: #50abf5;
}
.operateTitle span{
    margin-left: 32px;
    color: #6ac9ff;
}
.operateContent{
    height: calc(100% - 40px);
    width: 100%;
}
.drawPanelList_label{
    background-color: rgba(255, 255, 255, 0.2);
    width: 80%;
    margin: auto;
    padding: 3px 11px;
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 8px;
}
.EntityObjList{
    width: 90%;
    list-style-type: none;
    color: #abdbff;
    margin: 0px auto 10px auto;;
    display: flex;
    flex-wrap: wrap;
}
.EntityObjList li{
    width: 29%;
    height: 51px;
    position: relative;
    cursor: pointer;
    margin: 5px;
    border: 1px solid;
    border-image: linear-gradient(to right, #0037ff, #009eff, #04e7d8) 1;
}
.deleteItem{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 200;
}
.EntityObjDiv{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}
.EntityObjDiv i{
    font-size: 20px;
}
.EntityObjDiv span{
    font-size: 12px;
}
.operatebtn{
    position: absolute;
    right: 7%;
    top: 7%;
}
.operatebtn i{
    margin: 0 6px;
    color: #fff;
    cursor: pointer;
}
.el-dropdown{
    margin-top: 12px;
}
</style>
